import { Component, OnDestroy, OnInit } from '@angular/core';

import { NavigationEnd, Router } from '@angular/router';
import {
  PrimeNGConfig,
  MenuItem,
  ConfirmationService,
  MessageService,
} from 'primeng/api';
import { Subscription } from 'rxjs';
import { AppConfig } from './domain/appconfig';
import { AppConfigService } from './shared/service/appconfigservice';
import { CommonService } from './shared/service/common.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit, OnDestroy {
  title = 'primeNG01';
  items: MenuItem[];
  leftNavItems: MenuItem[];

  home: MenuItem;
  isLeftNavCollapse = false;

  isVisible = false;
  // leftNavWidth = 0;

  config: AppConfig;

  model = {
    new: '',
    old: '',
    renew: '',
  };

  public subscriptions: Subscription[] = [];

  constructor(
    private router: Router,
    private commonService: CommonService,
    private primengConfig: PrimeNGConfig,
    private configService: AppConfigService,
    private messageService: MessageService,
    private confirmationService: ConfirmationService
  ) {}

  ngOnInit() {
    this.primengConfig.ripple = true;

    this.config = this.configService.config;
    this.subscriptions[0] = this.configService.configUpdate$.subscribe(
      (config) => (this.config = config)
    );
    this.subscriptions[1] = this.commonService.currentPath.subscribe((path) => {
      // console.log(path)
      this.items = path.map((item) => {
        return { label: item };
      });
    });

    this.subscriptions[2] = this.router.events.subscribe((event) => {
      console.log(event);
      if (event instanceof NavigationEnd) {
      }
    });

    // this.items = [{ label: 'Level1' }, { label: 'Level2' }];

    this.leftNavItems = [
      {
        label: '目录1',
        icon: 'tag',
        items: [
          {
            label: '外链',
            icon: 'plus',
            url: 'http://www.baidu.com',
          },
          { label: '页面01', icon: 'download', routerLink: ['/page01'] },
          {
            label: '欢迎',
            // icon: 'pi pi-download',
            routerLink: ['/hello'],
            queryParams: { recent: true },
          },
        ],
      },
      {
        label: '目录2',
        icon: 'flag',
        items: [
          {
            label: '子目录1',
            // icon: 'pi pi-plus',
            items: [
              {
                label: '第三层',
                routerLink: ['/chart01'],
                // icon: 'pi pi-download',
              },
            ],
          },
          {
            label: '页面01',
            // icon: 'pi pi-download',
            routerLink: ['/page01'],
          },
          {
            label: '欢迎',
            // icon: 'pi pi-download',
            routerLink: ['/hello'],
            queryParams: { recent: true },
          },
        ],
      },
    ];

    this.home = { icon: 'pi pi-home', routerLink: '/' };
  }

  toggleLeftNav() {
    this.isLeftNavCollapse = !this.isLeftNavCollapse;
    setTimeout(() => {
      window.document.getElementsByTagName('body')[0].click();
    }, 500);
  }
  conform() {
    this.confirmationService.confirm({
      message: '确定退出登录?',
      accept: () => {
        this.messageService.add({
          severity: 'success',
          summary: '成功',
          detail: '操作成功',
        });
      },
      reject: () => {
        this.messageService.add({
          severity: 'error',
          summary: '失败',
          detail: '操作取消',
        });
      },
    });
  }
  handleClick(e) {
    // console.log(e)
    if (e.item.routerLink == '/') {
      this.items = [{ label: '首页' }];
    }
  }
  ngOnDestroy() {
    if (this.subscriptions.length > 0) {
      this.subscriptions.forEach((item) => {
        item.unsubscribe();
      });
    }
  }

  changePWClick(flag) {
    console.log(flag);
    this.isVisible = false;
    this.messageService.add({
      severity: 'success',
      summary: '成功',
      detail: JSON.stringify(this.model),
    });
  }
}
